<!--  -->
<template>
  <div :class="className">
    <div v-html="css"></div>
    <div class='category-page'>
      <div class="category-container">
        <div class="category-title">推荐分类</div>
        <div class="category-list" v-if="ticketList.length > 0">
          <div class="category-item" v-for="item in ticketList" :key="item.id" @click="toCate(item.id)">
            <div class="category-cover">
              <van-image :src="item.thumb" alt="" width="44" height="44" round/>
            </div>
            <div class="category-text">{{item.name}}</div>
          </div>
        </div>
        <van-empty description="暂无数据" v-else/>
      </div>
    </div>
  </div>
  
</template>

<script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';
  import { Image as VanImage } from 'vant';
  const css = function() {
    if (this.datas.preview_color) {
      // 确保数据已传入
      let datas = this.plugin_active && this.openTemplate == 1 ? this.datas_style02 : this.datas;
      const { preview_color,module_bg_color,font_color,category_color} = datas;
      return `
          .component-${this.id} .category-page {
              background: ${preview_color};
          }
          .component-${this.id} .category-page .category-container{
              background: ${module_bg_color};
          }
          .component-${this.id} .category-container .category-title {
            color: ${font_color};
          }
          .component-${this.id} .category-container  .category-list .category-item .category-text {
              color: ${category_color};
          }
      `;
    }
  };
  export default {
  name:'',
  props: ["id","page_id", "datas","lastIndex","index","component_key","isBottom"],
  //import引入的组件需要注入到对象中才能使用
  components: {
    VanImage
  },
  data() {
  return {
  };
  },
  //监听属性 类似于data概念
  computed: {
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    },
    ticketList() {
      return this.datas.list;
    }
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    toCate(id) {
      this.$router.push(this.fun.getUrl('search', { id, fromHome: 1 },{cate_id:id}));
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
.category-page {
  // margin-bottom: 20rpx;
  padding: 0.938rem
}
.category-container {
    background: #fff;
    border-radius: 0.375rem;
    padding:0 0 0.625rem 0;
    .category-title {
      text-align: left;
      font-size: 13.008px;
      color: #212121;
      padding:0.625rem 0 0 0.625rem;
    }

    .category-list {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-row-gap: 1.156rem;
      padding-top: 0.625rem;

      .category-item {
        display: flex;
        flex-direction: column;
        align-items: center;

        .category-cover {
          width: 2.75rem;
          height: 2.75rem;
          border-radius: 50%;

          img {
            width: 2.75rem;
            height: 2.75rem;
            border-radius: 50%;
          }
        }

        .category-text {
          margin-top: 0.625rem;
          font-size: 0.75rem;
          color: #292929;
        }
      }
    }
}
</style>